<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path=request.getContextPath();%>
<html>
	<head>
		<meta charset="UTF-8">
<meta name="author" content="order by dede58.com"/>
		<title>酒店四合一房间管理</title>
		<jsp:include page="common.jsp"/>

	</head>
	<body>
		<div class="main_box new_order">
			<h2><span></span>房间管理</h2>
			<form action="#" method="post">
				<div class="search_box clearfix">
					<label class="f_left">搜索房间：</label>
					<input type="search" id="search" placeholder="请输入房间号/楼层/房间类型/入住客人" class="f_left search_input" style="height: 35px;margin-right:15px;"/>
					<input type="submit" onclick="query()" value="搜索" class="btn blue_btn"/>
					<button type="button" onclick="add()" value="增加房间" class="btn blue_btn">增加房间</button>
				</div>
			</form>
			<div class="main_box">
				<h2><span></span>本店会员</h2>
				<div class="cont_box">
					<table border="0" cellspacing="0" cellpadding="0" class="table" id="table_box">
						<thead>
							<tr>
								<th>序号</th>
								<th>房间号</th>
								<th>房间类型</th>
								<th>房间价格</th>
								<th>房间楼层</th>
								<th>房间状态</th>
								<th>入住客人</th>
								<th width="268">操作</th>
							</tr>
						</thead>
						<tbody>
<%--静态展示						--%>
							<tr id="b_888"><!--此处id为进行查看该会员相关信息时，当前数据的唯一标识-->
								<td class="id">1</td>
								<td class="name">888</td>
								<td class="amount">单人间</td>
								<td class="price">1</td>
								<td class="floorId">8楼</td>
								<td class="state">空闲</td>
								<td class="customerId">张三</td>
								<td>
										<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick=""   class="table_btn blue_btn">编辑</button>

										<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick=""   class="table_btn table_del del_btn">删除</button>

								</td>
							</tr>
<%--动态输入house列表信息						--%>

							<c:forEach  items="${houseList}" var="one" varStatus="n">
								<tr id="b_${one.id}"><!--此处id为进行查看该会员相关信息时，当前数据的唯一标识-->
									<td class="id">${one.id}</td>
									<td class="name">${one.name}</td>
									<td class="amount">${one.amount}</td>
									<td class="price">${one.price}</td>
									<td class="floorId">${one.floorId}</td>
									<td class="state">${one.state}</td>
									<td class="customerId">${one.customerId}</td>
									<td>
										<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick="editor(${one.id})"   class="table_btn blue_btn">编辑</button>

										<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick="del(${one.id})"   class="table_btn table_del del_btn">删除</button>

										</a>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
<%--添加房间模态框					--%>
					<div>
						<div class="modal fade" id="addModal">
							<div class="modal-dialog">
								<div class="modal-content">

									<div class="modal-header">
										<h5 class="modal-title">添加房间</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>

									<div class="modal-body">
										<form action="#" method="post" id="add_form">
											<ul class="addpro_box adduser_box">
												<li>
													<label>房间号：</label>
													<input type="text" placeholder="请输入房间号" name="name"  id="name" data-msg-required="房间号不能为空" style="height: 35px;margin-right:15px;"/>
												</li>
												<li>
													<label>价格：</label>
													<input type="text" placeholder="请输入价格" name="pirce" id="price" data-msg-required="价格不能为空" style="height: 35px;margin-right:15px;"/>
												</li>
												<li>
<%--													<label>房间类型：</label>--%>
<%--													<input type="text" placeholder="请输入房间类型" name="amount" id="amount" data-msg-required="房间类型不能为空" style="height: 35px;margin-right:15px;"/>--%>
													<label>房间类型:</label>
													<select  name="amount" id="amount" style="float: left;">
														<option value="单人间" >单人间</option>
														<option value="双人间" >双人间</option>
														<option value="商务标间" >商务标间</option>
														<option value="大床房" >大床房</option>
														<option value="情侣房" >情侣房</option>
														<option value="豪华大床房" >豪华大床房</option>
														<option value="豪华大平层" >豪华大平层</option>
														<option value="总统套房" >总统套房</option>
													</select>
												</li>
												<li >
													<label>所在楼层:</label>
													<select  name="floorId" id="floorId" style="float: left;width: 80px">
														<option value="1楼" >1楼</option>
														<option value="2楼" >2楼</option>
														<option value="3楼" >3楼</option>
														<option value="4楼" >4楼</option>
														<option value="5楼" >5楼</option>
														<option value="6楼" >6楼</option>
														<option value="7楼" >7楼</option>
														<option value="8楼" >8楼</option>
													</select>
													<label>房间状态:</label>
													<select name="state" id="state" style="float: left;width: 80px">
														<option value="在住" >在住</option>
														<option value="已订" >已订</option>
														<option value="空闲" >空闲</option>
														<option value="维修">维修</option>
													</select>
												</li>
<%--												<li>--%>
<%--													<label>当前入住人：</label>--%>
<%--													<input type="text" placeholder="请输入当前入住人" name="customerId" id="customerId" style="height: 35px;margin-right:15px;"/>--%>
<%--												</li>--%>

											</ul>
										</form>
									</div>

									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
										<button type="submit" class="btn btn-primary"  onclick="add_do()">确认</button>
									</div>

								</div>
							</div>
						</div>
					</div>
<%--修改房间模态框					--%>
					<div>
						<div class="modal fade" id="editorModal">
							<div class="modal-dialog">
								<div class="modal-content">

									<div class="modal-header">
										<h5 class="modal-title">编辑房间</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>

									<div class="modal-body">
										<form action="#" method="post" id="editor_form">
											<ul class="addpro_box adduser_box">
												<li>
													<label>序号：</label>
													<input type="text" placeholder="${id}" name="id2"  id="id2" data-msg-required="序号不能修改"value="${id}"  disabled="disabled" style="height: 35px;margin-right:15px;"/>
												</li>
												<li>
													<label>房间号：</label>
													<input type="text" placeholder="${name}" name="name2"  id="name2"  value="${name}" data-msg-required="房间号不能为空" style="height: 35px;margin-right:15px;"/>
												</li>
												<li>
<%--													<label>房间类型：</label>--%>
<%--													<input type="text" placeholder="${amount}" name="amount2" id="amount2" value="${amount}" data-msg-required="房间类型不能为空"style="height: 35px;margin-right:15px;"/>--%>
<%--													--%>
													<label>所在楼层:</label>
													<select  name="amount2" id="amount2" style="float: left;">
														<option value="单人间" <c:if test="${amount2=='单人间'}"></c:if>>单人间</option>
														<option value="双人间" <c:if test="${amount2=='双人间'}"></c:if>>双人间</option>
														<option value="商务标间" <c:if test="${amount2=='商务标间'}"></c:if>>商务标间</option>
														<option value="大床房" <c:if test="${amount2=='大床房'}"></c:if>>大床房</option>
														<option value="情侣房" <c:if test="${amount2=='情侣房'}"></c:if>>情侣房</option>
														<option value="豪华大床房" <c:if test="${amount2=='豪华大床房'}"></c:if>>豪华大床房</option>
														<option value="豪华大平层" <c:if test="${amount2=='豪华大平层'}"></c:if>>豪华大平层</option>
														<option value="总统套房" <c:if test="${amount2=='总统套房'}"></c:if>>总统套房</option>
													</select>
												</li>
												<li>
													<label>价格：</label>
													<input type="text" placeholder="${price}" name="price2" id="price2" value="${price}" data-msg-required="价格不能为空"style="height: 35px;margin-right:15px;"/>
												</li>
												<li>
													<label>所在楼层:</label>
													<select  name="floorId2" id="floorId2" style="float: left;width: 80px">
														<option value="1楼" <c:if test="${floorId2=='1楼'}"></c:if>>1楼</option>
														<option value="2楼" <c:if test="${floorId2=='2楼'}"></c:if>>2楼</option>
														<option value="3楼" <c:if test="${floorId2=='3楼'}"></c:if>>3楼</option>
														<option value="4楼" <c:if test="${floorId2=='4楼'}"></c:if>>4楼</option>
														<option value="5楼" <c:if test="${floorId2=='5楼'}"></c:if>>5楼</option>
														<option value="6楼" <c:if test="${floorId2=='6楼'}"></c:if>>6楼</option>
														<option value="7楼" <c:if test="${floorId2=='7楼'}"></c:if>>7楼</option>
														<option value="8楼" <c:if test="${floorId2=='8楼'}"></c:if>>8楼</option>
													</select>
													<label>房间状态:</label>
													<select name="state2" id="state2" style="float: left;width: 80px">
														<option value="在住" <c:if test="${state2=='在住'}"></c:if>>在住</option>
														<option value="已订" <c:if test="${state2=='已订'}"></c:if>>已订</option>
														<option value="空闲" <c:if test="${state2=='空闲'}"></c:if>>空闲</option>
														<option value="维修" <c:if test="${state2=='维修'}"></c:if>>维修</option>
													</select>
<%--													<label>所在楼层：</label>--%>
<%--													<input type="text" placeholder="${floorId}" name="floorId2" id="floorId2" value="${floorId}" data-msg-required="楼层不能为空"/>--%>
												</li>
<%--												<li>--%>
<%--													<label>房间状态：</label>--%>
<%--													<input type="text" placeholder="${state}" name="state2" id="state2" value="${state}" data-msg-required="状态不能为空"/>--%>
<%--												</li>--%>
												<li>
													<label>当前入住人：</label>
													<input type="text" placeholder="${customerId}" name="customerId2" value="${customerId}" id="customerId2"style="height: 35px;margin-right:15px;"/>
												</li>

											</ul>
										</form>
									</div>

									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
										<button type="submit" class="btn btn-primary"  onclick="editor_do()">确认</button>
									</div>

								</div>
							</div>
						</div>
					</div>
			</div>
		</div>
		<!--javascript include-->

		<script>
			//初始化时加载所有房间信息

			//打开添加模态框
			function add() {
				$("#addModal").modal("show");
			}//发送添加请求
			function add_do() {
				//获取添加模态框数据
				//发送ajax请求  进行添加操作 并返回添加数
				$.ajax({
					url:"<%=path%>/house/add",
					method:"post",
					dataType:"JSON",
					data:{
						name:$("#name").val(),
						amount:$("#amount").val(),
						price:$("#price").val(),
						floorId:$("#floorId").val(),
						state:$("#state").val()
					},
					success:function (data) {
						if (data>0)alert("添加成功！！")
						else alert("添加失败！！")
						location.reload()
					},
					error:function (e) {
						alert("通讯失败")

					}
				});
			}
			//打开编辑模态框
			function editor(id) {
				//获取当前页面的数据  加入模态框显示
				$("#editorModal").modal("show");
				$("#id2").val($("#b_"+id+" .id").text());
				$("#name2").val($("#b_"+id+" .name").text());
				$("#amount2").val($("#b_"+id+" .amount").text());
				$("#price2").val($("#b_"+id+" .price").text());
				$("#floorId2").val($("#b_"+id+" .floorId").text());
				$("#state2").val($("#b_"+id+" .state").text());
				$("#customerId2").val($("#b_"+id+" .customerId").text()) ;
			}
			//发送编辑请求
			function editor_do() {
				//获取当前已修改的编辑模态框数据
				//发送ajax请求  进行更新操作 并返回更新数
				// alert($("#floorId2").val()+"////"+$("#state2").val())
				//发送ajax请求  进行添加操作 并返回添加数
				var b= confirm("确认修改？")
				if (b){
					$.ajax({
						url:"<%=path%>/house/update",
						method:"post",
						dataType:"JSON",
						data:{
							// id:$("#id2").valid(),
							name:$("#name2").val(),
							amount:$("#amount2").val(),
							price:$("#price2").val(),
							floorId:$("#floorId2").val(),
							state:$("#state2").val()
						},
						success:function (data) {
							if (data>0)alert("更新成功！！")
							else alert("更新失败！！")
							location.reload()
						},
						error:function (e) {
							alert("通讯失败")

						}
					});
				}else {
					//取消修改 什么也不做 刷新页面
					location.reload();
				}

			}
			//发送删除请求
			function del(id) {
				//获取id
				//发送ajax请求 进行删除操作  并返回删除数
				var b=confirm("确认删除？")
				if (b){
					$.ajax({
						url:"<%=path%>/house/delete",
						method:"post",
						dataType:"JSON",
						data:{
							name:$("#b_"+id+" .name").text(),
						},
						success:function (data) {
							if (data>0)alert("成功删除")
							else alert("删除失败")
							location.reload()
						},
						error:function (e) {
							alert("通讯失败")
						}
					})
				}else {
					//取消删除什么都不做 刷新页面
					location.reload();
				}

			}
			//发送查询请求
			function query() {
				//获取请求数据
				//发送ajax请求 进行模糊查询 并返回列表
			}
		</script>	
	</body>
</html>
		